<template>
  <ul class="abstract-wrapper">
    <li class="abstract-item" v-for="list in lists" :key="list.id">
      <div class="abstract-item_title">
        <router-link class="" :to="`/detail/${list.id}`">{{list.title}}</router-link>
      </div>
      <blockquote>{{list.description}}</blockquote>
      <hr />
      <div class="des">
        <div>
          <i class="iconfont icon-wode"><span>{{list.author}}</span></i>
          <i class="iconfont icon-shijian"><span>{{list.update}}</span></i>
          <i class="iconfont icon-tag"><router-link to="/tag">{{list.tag}}</router-link></i>
        </div>
        <div>
          <i class="iconfont icon-wode"><span>{{list.like}}</span></i>
        </div>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// import { list } from '@/types/lists'
interface list {
  id: number
  title: string
  description: string
  author: string
  // date: Date
  date: string
  update: string
  tag: string
  like?: number
}

export default defineComponent({
  name: 'list',
  props: {
  },
  setup (props) {
    const lists: list[] = [{
      id: 0,
      title: 'linux 学习整理',
      description: '前端&后端程序员应该掌握的Linux基础知识',
      author: 'yiyue',
      date: '2021/8/6',
      update: '2021/8/6',
      tag: '基础',
      like: 11
    }, {
      id: 0,
      title: 'linux 学习整理',
      description: '前端&后端程序员应该掌握的Linux基础知识',
      author: 'yiyue',
      date: '2021/8/6',
      update: '2021/8/6',
      tag: '基础',
      like: 11
    }, {
      id: 0,
      title: 'linux 学习整理',
      description: '前端&后端程序员应该掌握的Linux基础知识',
      author: 'yiyue',
      date: '2021/8/6',
      update: '2021/8/6',
      tag: '基础',
      like: 11
    }, {
      id: 0,
      title: 'linux 学习整理',
      description: '前端&后端程序员应该掌握的Linux基础知识',
      author: 'yiyue',
      date: '2021/8/6',
      update: '2021/8/6',
      tag: '基础',
      like: 11
    }, {
      id: 0,
      title: 'linux 学习整理',
      description: '前端&后端程序员应该掌握的Linux基础知识',
      author: 'yiyue',
      date: '2021/8/6',
      update: '2021/8/6',
      tag: '基础',
      like: 11
    }]
    return {
      lists
    }
  }
})
</script>

<style scoped>
.abstract-wrapper {
  width: 100%;
}
.abstract-wrapper .abstract-item:hover {
  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 20%);
}
.abstract-wrapper .abstract-item {
  margin: 0 auto 20px;
  padding: 16px 20px;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  box-sizing: border-box;
  transition: all 0.3s;
}
.abstract-item_title {
  position: relative;
  font-size: 1.28rem;
  line-height: 36px;
  display: inline-block;
}
.abstract-item_title::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #3eaf7c;
  visibility: hidden;
  transform: scaleX(0);
  transition: 0.3s ease-in-out;
}
.abstract-item_title:hover::after {
  visibility: visible;
  transform: scaleX(1);
}
.des {
  display: flex;
  justify-content: space-between;
}
.iconfont:not(:last-child) {
  margin-right: 1rem;
}
.iconfont * {
  margin-left: 0.5rem;
}
</style>
